<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view :style="{ height: wrapperWidth + 'rpx' }">
                <view>
                    <view class="title">
                        商品详情
                        <view class="close" @click="close">
                            <text class="cuIcon-close"></text>
                        </view>
                    </view>
                </view>

                <scroll-view
                    :style="{ height: wrapperWidth - 132 + 'rpx' }"
                    :scroll-y="true"
                    refresher-enabled
                    refresher-default-style="white"
                >
                    <view>
                       <view
                           v-for="(item, index) in products"
                           :key="index"
                           class="item"
                           :style="{
                               backgroundImage: 'url(' + LEVEL_MAP[item.level].bg + ')'
                           }"
                           @click="showSwipe(item)"
                       >
                          <image
                              class="super-image translateX"
                              :src="item.spu.cover"
                              mode="aspectFit"
                          />
                          <view class="text">{{ getLeftNum(item) }}/{{ item.quantity }}</view>
                          <view
                              class="text Probability"
                              :style="{
                                  color: LEVEL_MAP[item.level].color,
                                  borderColor: LEVEL_MAP[item.level].color
                              }"
                          >
                              {{LEVEL_MAP[item.level].title }} {{ getProbability(item) }}
                          </view>
                       </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
    import { LEVEL_MAP } from '@/utils/config'
    import resource from '@/utils/resource'
    import tabbar3 from '@/components/tabbar3'

    const Tabs = [
        { title: '全部', value: '' },
        { title: '超神款', value: 'A' },
        { title: '欧皇款', value: 'B' },
        { title: '隐藏款', value: 'C' },
        { title: '普通款', value: 'D' }
    ]
    export default {
        components: { tabbar3 },
        props: {
			products: Array,
			poolId: Number,
			box: Object,
			levelist: Array
        },
        data() {
            return {
                resource,
                LEVEL_MAP,
                visible: false,
                lastId: null,
                refreshing: false,
                requesting: false,
                tabs: Tabs,
                tab: Tabs[0]
            }
        },
        computed: {
            wrapperWidth() {
                return (this.$store.state.systemInfo.screenHeight / 3) * 2 * 2
            }
        },
        methods: {
            show() {
                this.visible = true
            },
            refresh() {

            },
            loadMore() {

            },
            async getData() {

            },
            clickTab(item) {
                this.tab = item
                this.refresh(true)
            },
            close() {
                this.visible = false
                this.$emit('close', false)
            },
			showSwipe(item) {
			  let index = this.products.findIndex(e=>{
			    return e.spu.id == item.spu.id
			  })
			    this.$router.push('award_detail_swipe', { poolId: this.poolId, index })
			},
			getLeftNum(row) {
			    if (
			        !this.box ||
			        !this.box.usedStat ||
			        !this.box.usedStat[row.spu.id] ||
			        !this.box.usedStat[row.spu.id].quantity
			    ) {
			        return row.quantity
			    }
			    return row.quantity - this.box.usedStat[row.spu.id].quantity
			},
			getProbability(row) {
			    if (!this.box) return
			    let leftNum = this.getLeftNum(row)
			    return (
			        this.$common.ignoreRatio0(
			            ((leftNum / this.box.leftQuantity) * 100).toFixed(4)
			        ) + '%'
			    )
			},
        }
    }
</script>

<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        background: #fff;
        border-radius: 15px 15px 0px 0px !important;
        overflow: hidden;
        .title {
            text-align: center;
            font-size: 32rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            color: #000000;
            padding: 44rpx 0 48rpx 0;
            position: relative;
        }

        .close {
            position: absolute;
            right: 0;
            width: 48rpx;
            height: 48rpx;
            background: #ebebeb;
            border-radius: 48rpx;
            color: #a2a2a2;
            top: 30rpx;
            line-height: 48rpx;
        }
        .item {
           width: 155rpx;
           // height: 230rpx;
           display: inline-block;
           background-position: 0 40rpx;
           background-size: 100% auto;
           background-repeat: no-repeat;
           margin-left: 10px;
		   margin-bottom: 10px;
           position: relative;
           // padding-bottom: 10rpx;
           .super-image {
               width: 140rpx;
               height: 170rpx;
           }
           .text {
               color: #fff;
               border-radius: 5rpx;
               font-size: 20rpx;
               text-align: center;
           }
           .Probability {
               background: #ffffff;
               border-radius: 376rpx 376rpx 376rpx 376rpx;
               opacity: 1;
               border: 2rpx solid #e1002e;
               font-size: 20rpx;
               // position: absolute;
               display: inline-block;
               padding: 4rpx 8rpx;
           }
        }
    }
</style>
